<template>
    <div>
        <!-- 添加或修改主机 -->
        <el-dialog v-model="open" center :title="title" append-to-body width="600px">
            <el-form ref="componentDeployRef" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入名称" />
                </el-form-item>
                <el-form-item label="组件分类" prop="categoryId">
                    <el-select v-model="form.categoryId" clearable filterable placeholder="请选择组件分类" @change="getDirList">
                        <el-option v-for="item in componentList" :key="item.id" :label="item.name"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="启用状态" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :value="0">启用</el-radio>
                        <el-radio :value="1">暂停</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="主机" prop="computerId">
                    <el-select v-model="form.computerId" clearable filterable placeholder="请选择主机" @change="handleChange"
                        @remove-tag="form.dependence = null">
                        <el-option v-for="item in computerList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="组件的注意事项" prop="remarks">
                    <el-input v-model="form.remarks" placeholder="请输入组件的注意事项" type="textarea" />
                </el-form-item>
                <el-form-item label="日志存放目录" prop="targetDir">
                    <el-select allow-create multiple v-model="form.targetDir" clearable filterable placeholder="请选择日志存放目录">
                        <el-option v-for="item in dirList" :key="item.defaultPath" :label="item.defaultPath" :value="item.defaultPath" />
                    </el-select>
                </el-form-item>
                <el-form-item label="端口号" prop="port">
                    <el-input v-model="form.port" placeholder="请输入端口号" type="number" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="closePopup">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>

import {listAllComputer} from "@/api/computer";
import { addComponentDeploy } from "@/api/componentDeploy";
import { getAllComponent, getDefaultDirList } from "@/api/componentCategory";

import { ref, reactive, getCurrentInstance, defineExpose } from 'vue'

const open = ref(false);
const title = ref('添加组件');
const { $store, proxy } = getCurrentInstance();
const form = reactive({
    name: '',
    status: 0,
    dependence: null,
    computerId: null,
    remarks: '',
    targetDir: '',
    type: 0,
    port: '',
    categoryId: null,
});
const computerList = ref([]);
const componentList = ref([]);
const rules = {
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
    ],
    computerId: [
        { required: true, message: '请选择主机', trigger: 'change' },
    ],
    remarks: [
        { required: true, message: '请输入组件的注意事项', trigger: 'blur' },
        { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' },
    ],
    targetDir: [
        { required: true, message: '请输入日志存放目录', trigger: 'blur' },
    ],
    port: [
        { required: true, message: '请输入端口号', trigger: 'blur' }
    ],
    categoryId: [
        { required: true, message: '请选择组件', trigger: 'change' },
    ],
};
const handleChange = e => {
  computerList.value.forEach(item => {
    if (item.id === e) {
      form.dependence = item.ipAddress
    }
  })
}

// 获取默认日志存放目录
const dirList = ref([]);
const getDirList = (val) => {
  // 通过id获取组件分类名称
  const categoryName = componentList.value.find(item => item.id === val).name;
  getDefaultDirList({ name: categoryName }).then(response => {
    const { data = [], code = undefined } = response;
    if (code === 0) {
      dirList.value = data;
    }
  });
}

// 查询主机列表
const getAllComputer = () => {
  listAllComputer().then(response => {
    if (response.data) {
      computerList.value = response.data;
    }
  });
}

// 获取组件列表
const getAllComponentDeploy = () => {
  getAllComponent().then(response => {
    const { data = [], code = undefined } = response;
    if (code === 0) {
      componentList.value = data;
    }
  });
}

// 提交表单
const submitForm = () => {
    proxy.$refs.componentDeployRef.validate((valid) => {
        if (valid) {
            const params = { ...form };
            params.targetDir = params.targetDir.join(',');
            addComponentDeploy(params).then(response => {
                const { data = {}, code = undefined } = response;
                if (code === 0) {
                    proxy.$modal.msgSuccess("添加组件组件成功");
                    closePopup();
                }
            });
        }
    });
}

// 关闭弹窗
const closePopup = () => {
    open.value = false;
}

// 打开弹窗
const openPopup = () => {
    // 统一重置表单
    form.name = '';
    form.status = 0;
    form.dependence = null;
    form.computerId = null;
    form.remarks = '';
    form.targetDir = '';
    form.type = 0;
    form.port = '';
    form.categoryId = null;
    open.value = true;
    proxy.resetForm("componentDeployRef");
}

defineExpose({
    openPopup,
    closePopup
})

// 组件初始化
const init = async () => {
  await getAllComputer();
  await getAllComponentDeploy();
}

init();
</script>

<style lang="scss" scoped></style>